<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <!-- 表单项 start -->
      <el-form-item label="属性名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" placeholder="请输入属性名称，例如 [ 重量 ]"></el-input>
      </el-form-item>

      <el-form-item
        label="支持检索"
        prop="isSearch"
        :label-width="formLabelWidth"
      >
        <el-radio-group v-model="form.isSearch">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="是否多值"
        prop="isMulti"
        :label-width="formLabelWidth"
      >
        <el-radio-group v-model="form.isMulti">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="数据类型"
        prop="dataType"
        :label-width="formLabelWidth"
      >
        <el-radio-group v-model="form.dataType" @change="dataTypeChange">
          <el-radio :label="0">文本</el-radio>
          <el-radio :label="1">数字</el-radio>
          <el-radio :label="2">布尔</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="可选数据"
        prop="options"
        :label-width="formLabelWidth"
        v-if="form.dataType != 2"
      >
        <div class="inline">
          <el-select
            v-model="form.optionList"
            multiple
            filterable
            allow-create
            placeholder="请输入可选项，例如 [ 白色，黑色，青色 ]"
          >
          </el-select>
          <el-input v-model="form.unit" placeholder="请输入属性单位，例如 [ KG，克，个 ]"></el-input>
        </div>
      </el-form-item>
      <!-- 表单项 end -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate" :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import updateMixins from "@/views/base/updateMixins";

// 请求接口 start
import productApi from "@/api/productApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "productBaseAttrUpdate",
  // 组件名称 end

  props: ["dialogTitle"],
  mixins: [updateMixins],
  data() {
    return {
      // 表格数据及校验规则 start
      initForm: {
        name: "",
        unit: "",
        isSearch: 0,
        isMulti: 0,
        dataType: 0,
        optionList: [],
      },
      form: {
        name: "",
        unit: "",
        isSearch: 0,
        isMulti: 0,
        dataType: 0,
        optionList: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 之间",
            trigger: "blur",
          },
        ],
      },
      // 表格数据及校验规则 end
    };
  },
  methods: {
    dataTypeChange(val) {
      if (val == 2) {
        this.form.optionList = [];
        this.form.unit = "";
      }
    },
    // 数据详情 start
    remoteData(row) {
      productApi.baseAttr
        .info(row.id)
        .then((res) => {
          this.form = JSON.parse(JSON.stringify(res.data));
          this.form.optionList = [];
          this.form.sort = null;
          res.data.optionList.forEach((option) => {
            this.form.optionList.push(option.attrValue);
          });
        })
        .catch((error) => {});
    },
    // 数据详情 end

    saveOrUpdate() {
      // 新增或编辑 start
      this.$refs["ruleForm"].validate((valid) => {
        var params = { ...this.form, ...this.meta };
        if (valid) {
          this.showLoading(true);
          if (!this.form.id) {
            productApi.baseAttr
              .save(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.resetAttrList();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          } else {
            productApi.baseAttr
              .update(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.resetAttrList();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          }
        }
      });
      // 新增或编辑 end
    },
  },
};
</script>

<style lang="less" scoped>
.el-form .el-select {
  width: 100%;
}
.el-dialog__wrapper {
  /deep/.el-dialog {
    .el-dialog__body {
      padding: 30px 30px;
    }
    .el-dialog__footer {
      padding: 10px 30px 30px 20px;
    }
  }
}
.inline {
  display: flex;
  .el-input {
    margin-left: 10px;
    width: 400px;
  }
}
</style>